<template>
	<dv-border-box-10 style="width: 100%;" v-show="Istheme == '0'">
		<el-card class=" item-background video_box">
			<video muted preload="auto" controls poster="../../../assets/loadding.jpg" width="100%" height="550" id="myVideo">

			</video>

		</el-card>
	</dv-border-box-10>

	<dv-border-box-12 style="width: 100%;" v-show="Istheme == '1'">
		<el-card class=" item-background video_box">
			<video muted preload="auto" controls poster="../../../assets/loadding.jpg" width="100%" height="550" id="myVideo">
			</video>
		</el-card>
	</dv-border-box-12>
</template>

<script>
import flvjs from 'flv.js'
export default {
	data() {
		return {
			player: null,
			videoDom: null,
			timerTask1: null,//检测视频卡顿任务定时器
			interval: null, //手柄发送信息时间间隔
		}
	},
	mounted() {
		// this.createdPlay();
	},
	computed: {
		Istheme() {
			return this.$store.state.global.theme
		},
	},
	methods: {
		createdPlay() {
			if (!flvjs.isSupported()) return;
			this.videoDom = document.getElementById('myVideo')
			if (flvjs.isSupported()) {
				// 创建一个播放器实例
				this.player = flvjs.createPlayer({
					type: 'flv', // 媒体类型，默认是 flv,
					isLive: true, // 是否是直播流
					hasAudio: false,
					hasVideo: true,
					stashInitialSize: 128,// 减少首桢显示等待时长

					url: ''// 流地址
				}, {
					// 其他的配置项可以根据项目实际情况参考 api 去配置
					enableWorker: false, //不启用分离线程
					enableStashBuffer: false, //关闭IO隐藏缓冲区
					autoCleanupSourceBuffer: true, //自动清除缓存
					fixAudioTimestampGap: true,
					autoCleanupMinBackwardDuration: false, // 清除缓存 对 SourceBuffer 进行自动清理
				});
				this.player.attachMediaElement(this.videoDom)
				this.player.load()
				this.player.play().catch((e) => {
					console.log("error:", e.message)
				})
				this.listenVideo();
				//手动取消静音去掉muted
			}
		},
	}
}
</script>

<style scoped>
.video_box {
	width: 100% !important;
	background: transparent;
	border: none;
	padding: 0;
}

#myVideo {
	object-fit: fill;
}
</style>
